<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="../../Templates/SubFolderTemplate.xhtml"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core">
    <ui:define name="head-title">
        <title>Add Production Plan | Merlion's ERP System</title>
    </ui:define>
    <ui:define name="content">
        <f:view beforePhase="#{generateSalesOperationPlan.initView(event)}"></f:view>
        <h:form prependId="false">   
            <p:panel id ="panel">
                <h:selectOneMenu value="#{generateSalesOperationPlan.startMonth}" required="true" requiredMessage="input start month">
                    <f:selectItem itemLabel="Select One" itemValue="" />  
                    <f:selectItems value="#{generateSalesOperationPlan.startMonths}" />  
                </h:selectOneMenu>

                <h:selectOneMenu value="#{generateSalesOperationPlan.endMonth}" required="true" requiredMessage="input end month">
                    <f:selectItem itemLabel="Select One" itemValue="" />  
                    <f:selectItems value="#{generateSalesOperationPlan.endMonths}" />  
                </h:selectOneMenu>
                
                <p:commandButton value="Retrieve Sales Forecast" actionListener="#{generateSalesOperationPlan.retrieveMonthlyData(event)}" update="panel" ajax="true" />
                <br/>
                <!--                   -->
                <p:separator  rendered="#{generateSalesOperationPlan.showFieldsetSalesForecast}"/>
                
                <p:fieldset id="fieldsetSalesForecast" legend="Sale Forecast" rendered="#{generateSalesOperationPlan.showFieldsetSalesForecast}">
                    <p:dataTable id="tableA" var="monthlyData" value="#{generateSalesOperationPlan.monthlyData}">  
                        <p:column style="width: 50px">
                            <f:facet name="header">
                                Month
                            </f:facet> 
                            <h:outputText value="#{monthlyData.monthName}" /> 
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                A
                            </f:facet> 
                            <h:outputText value="#{monthlyData.saleForecastA}"  /> 
                        </p:column> 
                        <p:column>
                            <f:facet name="header">
                                B
                            </f:facet> 
                            <h:outputText value="#{monthlyData.saleForecastB}"  /> 
                        </p:column> 
                        <p:column >
                            <f:facet name="header">
                                C
                            </f:facet> 
                            <h:outputText value="#{monthlyData.saleForecastC}"/> 
                        </p:column> 
                        <p:column>
                            <f:facet name="header">
                                D
                            </f:facet> 
                            <h:outputText value="#{monthlyData.saleForecastD}" /> 
                        </p:column> 
                    </p:dataTable>
                </p:fieldset>
                
                <p:fieldset id ="fieldsetProductionPlan" legend="Production Plan"  rendered="#{generateSalesOperationPlan.showFieldsetSalesForecast}">
                    <p:dataTable id="tableB" var="monthlyData" value="#{generateSalesOperationPlan.monthlyData}">
                        <p:column style="width: 50px">
                            <f:facet name="header">
                                Month
                            </f:facet> 
                            <h:outputText value="#{monthlyData.monthName}" /> 
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                Production Plan
                            </f:facet> 
                            <p:inputText value="#{monthlyData.productionPlan}" style="width: 400px" /> 
                        </p:column>
                    </p:dataTable>
                </p:fieldset>
                
                <p:fieldset id="fieldsetInventory" legend="Inventory"  rendered="#{generateSalesOperationPlan.showFieldsetSalesForecast}">
                    <p:dataTable id="tableC" var="monthlyData" value="#{generateSalesOperationPlan.monthlyData}">
                        <p:column style="width: 50px">
                            <f:facet name="header">
                                Month
                            </f:facet> 
                            <h:outputText value="#{monthlyData.monthName}" /> 
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                A
                            </f:facet> 
                            <h:outputText value="#{monthlyData.inventoryA}"  /> 
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                B
                            </f:facet> 
                            <h:outputText value="#{monthlyData.inventoryB}"  /> 
                        </p:column>
                        <p:column >
                            <f:facet name="header">
                                C
                            </f:facet> 
                            <h:outputText value="#{monthlyData.inventoryC}"/> 
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                D
                            </f:facet> 
                            <h:outputText value="#{monthlyData.inventoryD}" /> 
                        </p:column>
                    </p:dataTable>
                </p:fieldset>
                
                <p:fieldset id="fieldsetPercentage" legend="Breakdown Percentage"  rendered="#{generateSalesOperationPlan.showFieldsetSalesForecast}">
                    <h:panelGrid columns="4" cellpadding ="4">
                        <h:outputText value="A: "/>
                        <p:inputText value="#{generateSalesOperationPlan.breakDownA}" style="width: 100px" /> 
                        <h:outputText value="B: "/>
                        <p:inputText value="#{generateSalesOperationPlan.breakDownB}" style="width: 100px"/> 
                        <h:outputText value="C: "/>
                        <p:inputText value="#{generateSalesOperationPlan.breakDownC}" style="width: 100px" /> 
                        <h:outputText value="D: "/>
                        <p:inputText value="#{generateSalesOperationPlan.breakDownD}" style="width: 100px"/> 
                    </h:panelGrid>
                </p:fieldset>
                <p:commandButton value="Refresh" actionListener="#{generateSalesOperationPlan.refresh(event)}" update="tableC" ajax="true"  rendered="#{generateSalesOperationPlan.showFieldsetSalesForecast}"/>
                <p:commandButton value="Submit" actionListener="#{generateSalesOperationPlan.generate(event)}" ajax="true"  rendered="#{generateSalesOperationPlan.showFieldsetSalesForecast}"/>
            </p:panel>
        </h:form>
    </ui:define>
</ui:composition>